page{height:100%;background-color:#F7F7F7;}
::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
}
.cardDetails{
  height:100vh;
  width:calc(unit(350,rpx) * 750 / 390);
  margin-left:calc(unit(20,rpx) * 750 / 390);
  margin-right:calc(unit(20,rpx) * 750 / 390);
  .btn_line {
    z-index: 50;
    width: calc(unit(350, rpx) * 750 / 390);
    position: fixed;
    height: calc(unit(48+16+16, rpx) * 750 / 390);
    background-color: #F7F7F7;
    display: flex;
    flex-direction: row;
    view {
      margin-top: calc(unit(16, rpx) * 750 / 390);
      margin-right: calc(unit(8, rpx) * 750 / 390);;
      height: calc(unit(48, rpx) * 750 / 390);
      background-color: white;
      font-size: calc(unit(24, rpx) * 750 / 390);
      text-align: center;
      line-height: calc(unit(48, rpx) * 750 / 390);
      border-radius: calc(unit(8, rpx) * 750 / 390);
      border-top: calc(unit(1, rpx) * 750 / 390) solid black;
      border-left: calc(unit(1, rpx) * 750 / 390) solid black;
      border-right: calc(unit(4, rpx) * 750 / 390) solid black;
      border-bottom: calc(unit(4, rpx) * 750 / 390) solid black;
      display: inline-block;
      image{
        //background-color: lightcyan;
        transform: translateY(8rpx);
        height: calc(unit(24, rpx) * 750 / 390);
        width: calc(unit(24, rpx) * 750 / 390);
        mode:scallToFill;
      }
    }
  }
  .time_display{
    position: relative;
    top:calc(unit(88+64+16,rpx) * 750 / 390);
    .time_block{
      margin-bottom: calc(unit(32,rpx) * 750 / 390);
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-content: space-between;
      .line_text{
        width:  100%;
        height:calc(unit(21,rpx) * 750 / 390);
        line-height: calc(unit(21,rpx) * 750 / 390);;
        font-size:calc(unit(18,rpx) * 750 / 390);
        color: #979797;
        overflow: hidden;
        white-space: nowrap;
        display: flex;
        flex-direction: row;
      }
      .card{
        margin-right: calc(unit(6,rpx) * 750 / 390);;
        height: calc(unit(150,rpx) * 750 / 390);
        width: calc(unit(112.5,rpx) * 750 / 390);
        margin-top:calc(unit(8,rpx) * 750 / 390);
        border-radius: calc(unit(8, rpx) * 750 / 390);
        image{
          width: 100%;
          height: 100%;
          mode: scaleToFill;
        }
        .collected{
          width: calc(unit(26,rpx) * 750 / 390);
          height: calc(unit(26,rpx) * 750 / 390);
          position: relative;
          bottom:calc(unit(134,rpx) * 750 / 390);
          left:calc(unit(80.5,rpx) * 750 / 390);
        }
      }
      .card:nth-child(3n-2) {
        margin-right: 0;
      }

    }
  }
}
.date_picker_view{
  z-index: 100;
  font-size: calc(unit(24, rpx) * 750 / 390);
  width:100%;
  position: fixed;
  bottom:0;
  background-color: white;;
  text-align: center;
  height: calc(unit(324, rpx) * 750 / 390);
  border-radius: calc(unit(32,rpx) * 750 / 390) calc(unit(32,rpx) * 750 / 390) 0 0;
  picker-view{
    height: calc(unit(180,rpx) * 750 / 390);
    margin-top: calc(unit(32,rpx) * 750 / 390);
    width:calc(unit(236,rpx) * 750 / 390);
    margin-left: auto;
    margin-right: auto;
  }
  .btn{
    width: 100%;
    height:calc(unit(24,rpx) * 750 / 390); ;
    margin-top: calc(unit(32,rpx) * 750 / 390);
    line-height:calc(unit(24,rpx) * 750 / 390);
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    color:#115BDE;
  }
}
.SingleCardDetail{
  z-index: 110;
  font-size: calc(unit(24, rpx) * 750 / 390);
  position: fixed;
  left: calc(unit(72, rpx) * 750 / 390);
  top: calc(unit(202, rpx) * 750 / 390);
  width: calc(unit(247, rpx) * 750 / 390);;
  height: calc(unit(445, rpx) * 750 / 390);;
  //background-color:lightcyan;
  text-align: center;
  .img {
    width: calc(unit(225, rpx) * 750 / 390);
    height: calc(unit(300, rpx) * 750 / 390);
    margin: 0 auto;
    -webkit-perspective: 1500;//子元素获得透视效果
    -moz-perspective: 1500;
  }
  .box {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(unit(225, rpx) * 750 / 390);
    height: calc(unit(300, rpx) * 750 / 390);
    transition: all 1s;
    backface-visibility: hidden;//旋转看不到背面
    cursor: pointer;
  }
  .box image{
    width: 100%;
    height: 100%;
  }
  .b2 {
    transform: rotateY(-180deg);
  }
  .describe {
    margin-top: calc(unit(16, rpx) * 750 / 390);
    margin-bottom: calc(unit(16, rpx) * 750 / 390);
  }

  .btn_card {
    line-height: calc(unit(48, rpx) * 750 / 390);

    view {
      margin: 0 auto;
      background-color: white;
      width: calc(unit(97, rpx) * 750 / 390);
      height: calc(unit(48, rpx) * 750 / 390);
      border-radius: calc(unit(50, rpx) * 750 / 390);
      border-top: calc(unit(1, rpx) * 750 / 390) solid black;
      border-left: calc(unit(1, rpx) * 750 / 390) solid black;
      border-right: calc(unit(4, rpx) * 750 / 390) solid black;
      border-bottom: calc(unit(4, rpx) * 750 / 390) solid black;
    }
  }
  //border-radius: calc(unit(32,rpx) * 750 / 390) calc(unit(32,rpx) * 750 / 390) 0 0;
}
.mask {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}
.maskCard{
  .mask
}
